<template>
  <NavBar
    :toggleShowBookmark="toggleShowBookmark"
    :showBookmark="showBookmark"
  />

  <div v-show="!showBookmark">
    <van-tabs v-model:active="currentComponent">
      <van-tab title="热点" name="Hot"></van-tab>
      <van-tab title="运动" name="Sport"></van-tab>
      <van-tab title="金融" name="Finance"></van-tab>
      <van-tab title="娱乐" name="Entertainment"></van-tab>
    </van-tabs>

    <KeepAlive>
      <component
        :is="componentMap[currentComponent]"
        :bookmarkNews="bookmarkNews"
        :addBookmark="addBookmark"
        :removeBookmark="removeBookmark"
        :hideNews="hideNews"
        :addHideNews="addHideNews"
      ></component>
    </KeepAlive>
  </div>

  <div v-show="showBookmark">
    <Bookmark
      :bookmarkNews="bookmarkNews"
      :addBookmark="addBookmark"
      :removeBookmark="removeBookmark"
      :hideNews="hideNews"
      :addHideNews="addHideNews"
    />
  </div>

  <van-back-top />
</template>

<script setup>
import NavBar from "./ui/NavBar.vue";
import Finance from "./features/Finance/Finance.vue";
import Sport from "./features/Sport/Sport.vue";
import Entertainment from "./features/Entertainment/Entertainment.vue";
import Hot from "./features/Hot/Hot.vue";
import Bookmark from "./features/Bookmark/Bookmark.vue";
import { useToggleBookmark, useBookmark } from "./hooks/bookmark.js";
import { useHideNews } from "./hooks/hideNews.js";

import { ref } from "vue";
const componentMap = {
  Hot,
  Sport,
  Finance,
  Entertainment,
};
const currentComponent = ref("Hot");

const { showBookmark, toggleShowBookmark } = useToggleBookmark();

const { bookmarkNews, addBookmark, removeBookmark } = useBookmark();

const { hideNews, addHideNews } = useHideNews();
</script>
